<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<title>Test touch events with transition</title>
	<!--
		This test aims to check the behavior of a Touch event during a 
		transition.
		            
		Test case #1
		From the "Home" view:
		Whatever the area of ​​the list item "View1" that you touch, you should 
		transition to the view "View1" without the keypad focused on the input 
		field.
		            
		Test case #2
		From the "Home" view:
		Whatever the area of ​​the list item "View2" that you touch, you should
		transition to the view "View2" without altering the value under the 
		item "ListItem B".
	-->
	<script type="text/javascript" src="../deviceTheme.js"></script>
	<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true"></script>
	<script type="text/javascript">
		require([ 
			"dojox/mobile/parser", 
			"dojo/on", 
			"dojo/dom",
			"dojo/touch",
			"dojox/mobile",
			"dojox/mobile/compat", 
			"dojo/domReady!"
		], function(parser, on, dom, touch) {
			parser.parse();
			var myElement = dom.byId("div1");
			on(myElement, "click", function(evt) {
				dom.byId("div1").innerHTML = "last touch timestamp: " 
											+ (new Date()).getTime();
			});
		});
	</script>
</head>

<body style="visibility: hidden;">
	<div id="home" data-dojo-type="dojox/mobile/View">
		<h1 id="homeH1" data-dojo-type="dojox/mobile/Heading">Home</h1>
		<ul id="homeUL" data-dojo-type="dojox/mobile/EdgeToEdgeList">
			<li id="homeLI1" data-dojo-type="dojox/mobile/ListItem" data-dojo-props="moveTo: '#view1'">View 1</li>
			<li id="homeLI2" data-dojo-type="dojox/mobile/ListItem" data-dojo-props="moveTo: '#view2'">View 2</li>
		</ul>
		<div>
			This test aims to check the behavior of a Touch event during a 
			transition.<hr />
			<b>Test case #1</b><br />
			From the "Home" view, whatever the area of the list item "View1" 
			that you touch, you should transition to the view "View1" without 
			the keypad focused on the input field.<hr />
			<b>Test case #2</b><br />
			From the "Home" view, whatever the area of the list item "View2" 
			that you touch, you should transition to the view "View2" without 
			altering the value under the item "ListItem B".
		</div>
	</div>
	<div id="view1" data-dojo-type="dojox/mobile/View">
		<h1 id="view1H1" data-dojo-type="dojox/mobile/Heading" data-dojo-props="moveTo: '#home', back: 'Home'">View1</h1>
		<input id="view1INPUT" type="text" placeholder="input field..." />
		<ul id="view1UL" data-dojo-type="dojox/mobile/EdgeToEdgeList">
			<li id="view1LIA" data-dojo-type="dojox/mobile/ListItem">ListItem A</li>
		</ul>
	</div>
	<div id="view2" data-dojo-type="dojox/mobile/View">
		<h1 id="view2H1" data-dojo-type="dojox/mobile/Heading" data-dojo-props="moveTo: '#home', back: 'Home'">View2</h1>
		<ul id="view2UL" data-dojo-type="dojox/mobile/EdgeToEdgeList">
			<li id="view2LIB" data-dojo-type="dojox/mobile/ListItem">ListItem B</li>
		</ul>
		<div id="div1" style="font-size: 24pt; background-color: rgb(128, 128, 255)">
			<span>Touch me!</span>
		</div>
	</div>
</body>
</html>